    <!--selectedDropdown:{{selectedDropdown|json}}-->
<div class="j4care_dropdown" (clickOutside)="showDropdown = false" [clickOutsideExceptionClass]="['option', 'dropdown_input', 'input_part', 'selected_value', 'glyphicon-triangle-bottom', 'select']">
    <div class="dropdown_input" (click)="toggleDropdown()">
        <div class="input_part">
            <ng-container *ngIf="multiSelectMode">
                <div class="selected_value" *ngIf="multiSelectValue && multiSelectValue.length > 0 && multiSelectValue.length <= maxSelectedValueShown">{{multiSelectValue}}</div>
                <div class="selected_value" *ngIf="multiSelectValue && multiSelectValue.length > maxSelectedValueShown">( {{multiSelectValue.length}} ) <ng-container i18n="@@selected">selected</ng-container></div>
                <div class="selected_value" *ngIf="!multiSelectValue || multiSelectValue.length === 0">{{placeholder}}</div>
            </ng-container>
            <ng-container *ngIf="!multiSelectMode && (selectedValue && selectedDropdown)">
                <div class="selected_value" *ngIf="!(selectedDropdown && selectedDropdown.htmlLabel)">{{selectedDropdown.label || selectedDropdown.text || selectedDropdown.value}}</div>
                <div class="selected_value" *ngIf="selectedDropdown && selectedDropdown.htmlLabel" [innerHTML]="selectedDropdown.htmlLabel"></div>
            </ng-container>
            <div *ngIf="!(selectedValue && selectedDropdown) && !multiSelectMode" class="selected_value empty_field">{{placeholder}}</div>
        </div>
        <span class="glyphicon glyphicon-triangle-bottom"></span>
    </div>
    <div class="select" [@showHide]="showDropdown ? 'show':'hide'" >
        <div action="" class="search_block" *ngIf="showSearchField">
            <input type="checkbox" [(ngModel)]="isAllCheck"(change)="allChecked($event)">
            <input type="text" i18n-placeholder="@@search" placeholder="Search" [(ngModel)]="search" (keyup)="searchEvent()">
        </div>
        <ng-content></ng-content>
    </div>
</div>
